<template>
  <div class="box">
    <div class="box1">
      <h1 class="h">
        {{t('login.UserLogin')}}
        <div class="se">
          <el-select
            v-model="data.value"
            class="select"
            placeholder="中/英"
            size="large"
            @change="tog"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
      </h1>
      <el-form :model="data.form">
        <el-form-item>
          <el-input
            v-model="data.form.username"
            placeholder="输入用户名"
            :prefix-icon="User"
          />
        </el-form-item>
        <el-form-item>
          <el-input
            v-model="data.form.password"
            type="password"
            class="w-50 m-2"
            placeholder="输入密码"
            :prefix-icon="Lock"
            show-password
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit" style="width: 100%">{{
            t("login.login")
          }}</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, toRefs } from "vue";
import { useStore } from "vuex";
import { useRouter, useRoute } from "vue-router";
import { Lock, User } from "@element-plus/icons-vue";
import md5 from "md5";
import { useI18n } from "vue-i18n";
const { locale } = useI18n();
const { t } = useI18n();
const changeLang = (lang) => {
  locale.value = lang;
  localStorage.setItem("lang", lang);
};

const options = reactive(
  [
    {
    label: "中文",
    value: "zh",
  },
  {
    label: "英文",
    value: "en",
  }
  ]
);
const router = useRouter();
const store = useStore();
const data = reactive({
  form: {
    username: "super-admin",
    password: "123456",
  },
  value: "",
});
const tog = () => {
  locale.value = data.value;
  localStorage.setItem("lang", data.value);
};

const onSubmit = () => {
  store
    .dispatch("login", {
      username: data.form.username,
      password: md5(data.form.password),
    })
    .then((res) => {
      router.push("/profile");
    });
};
</script>

<style scoped lang='scss'>
.box {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #2d3a4b;
}
.box1 {
  padding-top: 100px;
  width: 500px;
  height: 100%;
  margin: auto;
  .h {
    text-align: center;
    margin-bottom: 60px;
    color: white;
    position: relative;
  }
}
.se {
  position: absolute;
  right: 0;
  top: 0;
  .select {
    width: 88px;
  }
}
</style>